<template>
	<view class="container">
		<!-- <view class="title one flex-just-between">
			<view>{{ $t('transferAccounts.recentPayee') }}</view>
			<image class="record-img" src="@/static/record-icon.png"></image>
		</view>
		<view class="user-list flex-item-center">
			<view v-for="(user, index) in userList" :key="index" class="user-item">
				<image src="/static/icon.png"></image>
				<view>{{ user.name }}</view>
				<text>{{ user.phone }}</text>
			</view>
		</view> -->

		<view class="title">{{ $t('transferAccounts.amountOfMoney') }}</view>
		<view class="sub-title">{{ $t('transferAccounts.rechargePrompt') }}</view>
		<view class="input-box">
			<input type="text" :placeholder="$t('transferAccounts.addressPlaceholder')" v-model="inputAddress">
		</view>
		<view class="input-box">
			<input type="number" :placeholder="$t('transferAccounts.amountPlaceholder')" v-model.number="inputAmount">
		</view>

		<view class="text-title flex-just-between">
			<view>{{ $t('transferAccounts.walletBalanceTitle') }}</view>
			<view>{{ $t('transferAccounts.authorizedTitle') }}</view>
		</view>

		<view @click="confirmSubmit" class="continue-btn" :class="{ 'disabled': !isFormValid }"
			:disabled="!isFormValid">
			{{ $t('transferAccounts.continueBtn') }}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userList: [{
						name: '艾丽娅',
						phone: '123***444'
					},
					{
						name: '艾丽娅',
						phone: '123***444'
					},
					{
						name: '艾丽娅',
						phone: '123***444'
					},
					{
						name: '艾丽娅',
						phone: '123***444'
					}
				],
				inputAmount: '', // 初始化为数字 0
				inputAddress: '',
				amountError: false,
				addressError: false
			}
		},
		computed: {
			isFormValid() {
				return (
					this.inputAmount > 0 &&
					this.inputAddress.trim().length > 0 &&
					!this.amountError &&
					!this.addressError
				);
			}
		},
		methods: {
			confirmSubmit() {

				if (!this.isFormValid) {
					uni.showToast({
						title: this.getValidationMessage(),
						icon: 'none',
						duration: 2000
					});
					return;
				}

				// 执行提交逻辑
				uni.navigateTo({
					url: `/pages/my/transfer-accounts/confirm?amount=${this.inputAmount}&address=${this.inputAddress}`
				});
			},

			getValidationMessage() {
				if (this.inputAmount <= 0) return this.$t('transferAccounts.error.amount');
				if (this.inputAddress.trim().length === 0) return this.$t('transferAccounts.error.address');
				return this.$t('transferAccounts.error.default');
			}
		}
	}
</script>


<style lang="less" scoped>
	.container {
		padding: 50rpx 48rpx 10rpx;
		min-height: 93vh;
		background: #FBFCFF;

		.title {
			line-height: 78rpx;
			font-size: 36rpx;

			&.one {
				margin-bottom: 26rpx;
				font-weight: bold;
			}

			.record-img {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.user-list {
			margin-bottom: 130rpx;

			.user-item {
				margin-right: 50rpx;
				font-size: 28rpx;
				text-align: center;

				&:last-child {
					margin-right: 0;
				}

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}

				text {
					color: #B7BAC2;
					font-size: 24rpx;
				}
			}
		}

		.sub-title {
			color: #B7BAC2;
			font-size: 30rpx;
			line-height: 42rpx;
		}

		.input-box {
			margin-top: 30rpx;
			height: 112rpx;
			background-color: #fff;
			box-shadow: 20rpx 20rpx 80rpx 0rpx rgba(7, 17, 53, 0.04);
			border-radius: 20rpx;
			overflow: hidden;

			input {
				width: 100%;
				height: 100%;
				line-height: 112rpx;
				padding: 0 46rpx;
				font-size: 32rpx;
			}
		}

		.text-title {
			margin: 50rpx 0 54rpx;
			padding: 0 20rpx;
			color: #D9D9D9;
			font-size: 28rpx;
		}

		.continue-btn {
			margin: 60rpx auto 0;
			width: 622rpx;
			height: 128rpx;
			line-height: 128rpx;
			background-color: #52a5f3;
			font-size: 40rpx;
			color: #fff;
			font-weight: bold;
			text-align: center;
			border-radius: 64rpx;
		}
	}
</style>